<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <hr />
    <div>pageX: {{ pageX }}</div>
    <div>pageY: {{ pageY }}</div>
  </div>
</template>

<script>
import { onMounted, onUnmounted, ref } from "vue";
// 案例：获取鼠标实时位置在页面中显示
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  setup() {
    const pageX = ref();
    const pageY = ref();

    const mouseLocal = (e) => {
      // 解构赋值
      // 解构出来pageX取别名叫x
      // 解构出来pageY取别名叫y
      const { pageX: x, pageY: y } = e;
      pageX.value = x;
      pageY.value = y;
      console.log(x, y);
    };

    // 当挂载之后获取鼠标的实时位置
    onMounted(() => {
      document.addEventListener("mousemove", mouseLocal);
    });
    onUnmounted(() => {
      document.removeEventListener("mousemove", mouseLocal);
    });

    return {
      pageX,
      pageY,
    };
  },
};
</script>

<style scoped>
</style>
